<script setup lang="ts">
import ContentTitle from '@/components/ContentTitle/index.vue'
import PaginationAlbum from '@/components/PaginationAlbum/index.vue'
import APICommon from '@/api/common'
import ItemStyle from '@/components/ItemStyle/index.vue'

const $route = useRoute()
const $router = useRouter()

const loading = shallowRef<boolean>(false)

const queryParams = ref<PageQuery>({
    page: 1,
    limit: 8
})

const list = ref<any[]>([])

const total = shallowRef<number>(0)

function getActivityList() {
    const queryData: any = {
        category_type: 'all',
    }
    loading.value = true
    APICommon.getActivityList(queryData, queryParams.value).then(({ data }) => {
        list.value = data
    }).finally(() => {
        loading.value = false
    })
}


watch($route, () => {
    getActivityList()
}, {
    immediate: true
})

function handleJumpActivityDetails(id: number) {
    $router.push({
        name: 'ActivityDetails',
        params: {
            id
        }
    })
}
const column = [{
    label: '关于心安元素',
    jumpLink: 'About'
}, {
    label: '心安元素活动',
    jumpLink: 'ActivityAll',
    active: true
}, {
    label: '通知及公告',
    jumpLink: 'Notice'
}, {
    label: '隐私政策及协议',
    jumpLink: 'Agreement'
}]

</script>

<template>
    <div class="activity-all">
        <ColumnNav class="left-nav" :column="column" />

        <div class="activity-all-content">
            <div v-loading="loading">
                <el-empty description="暂无内容" v-if="list.length == 0" />
                <div class="content">
                    <div class="content-item" v-for="item in list" @click="handleJumpActivityDetails(item.id)">
                        <img class="image" :src="item.image" alt="">
                        <div class="text">
                            <div class="text-1">{{ item.title }}</div>
                            <div class="text-2" v-html="item.content"></div>
                            <div class="text-3">
                                <span>2023-09-01</span>
                                <span>分类：公司平台</span>
                            </div>
                        </div>
                        <div class="number">
                            <div class="number-item">
                                <span>{{ item.hot }}</span>
                                <span>：浏览量</span>
                            </div>
                            <div class="number-item">
                                <span>{{ item.forward_num }}</span>
                                <span>：转发</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <PaginationAlbum :total="total" v-model:current-page="queryParams.page" :page-size="queryParams.limit"
                @get-list="getActivityList" />
        </div>

    </div>
</template>

<style lang="scss" scoped>
.activity-all {
    width: 1250px;
    padding: 0 20px;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 300px;

    .left-nav {
        float: left;
        margin-right: 50px;
    }

    .activity-all-content {
        width: 1000px;
        float: left;

        .content {
            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';

            .content-item {
                box-sizing: border-box;
                border-bottom: 1px dotted #000000;
                display: flex;
                align-items: center;
                height: 190px;
                cursor: pointer;

                &::before {
                    content: '';
                    display: block;
                    width: 5px;
                    height: 85%;
                    background-color: transparent;
                }

                &:hover {
                    &::before {
                        content: '';
                        display: block;
                        width: 5px;
                        height: 85%;
                        background-color: #F91414;
                    }
                }

                .number {
                    margin-left: auto;
                    margin-top: 20px;

                    span {
                        font-size: 14px;

                        &:nth-child(1) {
                            color: rgba(56, 148, 255, 1);
                        }


                        &:nth-child(2) {
                            color: rgba(136, 136, 136, 1);
                        }
                    }
                }

                .text {
                    margin-left: 15px;
                    width: 520px;

                    .text-1 {
                        color: rgba(119, 145, 201, 1);
                        font-size: 16px;
                        font-family: 'SOURCEHANSANSCN-LIGHT';
                    }

                    .text-2 {
                        width: 780px;
                        color: rgba(16, 16, 16, 1);
                        font-size: 14px;
                        text-indent: 2em;
                        margin-top: 10px;
                    }

                    .text-3 {
                        margin-top: 20px;
                        color: rgba(187, 187, 187, 1);
                        font-size: 14px;
                        display: flex;
                        gap: 0 20px;
                    }
                }

                .image {
                    height: 120px;
                    border-radius: 5px;
                    display: block;
                    object-fit: cover;
                    margin-left: 10px;

                }

            }
        }

        .video-content {
            gap: 30px 28px;
            margin-bottom: 30px;
        }
    }
}
</style>
